import { defineConfig, presetUno, presetAttributify, transformerDirectives } from 'unocss'
import presetRemToPx from '@unocss/preset-rem-to-px'

function genSimilarColorsName(name) {
  return {
    light: `var(--el-color-${name}-light-3)`,
    DEFAULT: `var(--el-color-${name})`,
    deep: `var(--el-color-${name}-dark-2)`,
    300: `var(--el-color-${name}-light-3)`,
    500: `var(--el-color-${name}-light-5)`,
    700: `var(--el-color-${name}-light-7)`,
    900: `var(--el-color-${name}-light-9)`
  }
}

export default defineConfig({
  presets: [
    //默认预设
    presetUno(),
    //rem转px
    presetRemToPx({
      baseFontSize: 4
    }),
    //属性化模式
    presetAttributify()
  ],
  //支持指令@apply、@screen等
  transformers: [transformerDirectives()],
  theme: {
    colors: {
      primary: genSimilarColorsName('primary'),
      info: genSimilarColorsName('info'),
      success: genSimilarColorsName('success'),
      warning: genSimilarColorsName('warning'),
      danger: genSimilarColorsName('danger'),
      blackPrimary: '#212225',
      blackRegular: '#575A60',
      placeholder: '#8C8E93'
    },
    fontSize: {
      base: 'var(--layout-font-size)',
      small: 'calc(var(--layout-font-size) - 2px)',
      large: 'calc(var(--layout-font-size) + 2px)'
    },
    spacing: {
      base: 'var(--layout-card-spacing)'
    }
  },
  shortcuts: {
    'f-b': 'flex justify-between items-center',
    'f-c': 'flex justify-center items-center',
    'f-s': 'flex justify-start items-center',
    'f-e': 'flex justify-end items-center',
    'text-overflow': 'truncate',
    'center-card-wrap': 'pt-base px-base min-w-fit'
  },
  rules: [
    [/^b-(\d+)$/, (match) => ({ 'border-width': `${match[1]}px` })],
    [/^b-(\d+)-#([\w]+)$/, (match) => ({ border: `solid ${match[1]}px #${match[2]}` })],
    [/^bt-(\d+)-#([\w]+)$/, (match) => ({ 'border-top': `solid ${match[1]}px #${match[2]}` })],
    [/^bb-(\d+)-#([\w]+)$/, (match) => ({ 'border-bottom': `solid ${match[1]}px #${match[2]}` })],
    [/^bl-(\d+)-#([\w]+)$/, (match) => ({ 'border-left': `solid ${match[1]}px #${match[2]}` })],
    [/^br-(\d+)-#([\w]+)$/, (match) => ({ 'border-right': `solid ${match[1]}px #${match[2]}` })]
  ]
})
